<template>
	<view class="wrapper">
		<view class="head" @tap="$open('./userInfo')">
			<view class="aside_left">
				<dimg :src="'' | avatar" mode="" class="user_head"></dimg>
				<view class="user_box">
					<view class="user_name">{{ userinfo.nickname }}</view>
					<view class="user_number">{{ userinfo.telephone }}</view>
				</view>
			</view>
			<view class="aside_right">
				<image src="../../static/user/erweima.png" mode="" class="erweima"></image>
				<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
			</view>
		</view>
		<view class="mar_b setFlex" @tap="$open('./user_wallet')">
			<view class="space-bet">
				<image src="../../static/user/wpay.png" class="allImages1"></image>
				<view class="set_font">我的钱包</view>
			</view>
			<image src="../../static/user/right_arr.png" class="arr_right"></image>
		</view>
		<view class="my_box mar_b">
			<view class="bord720">
				<view class="windcar setFlex1" @tap="$open('./dynamic')">
					<view class="space-bet">
						<image src="../../static/user/windcar.png" class="allImages"></image>
						<view class="set_font">我的动态</view>
					</view>
					<image src="../../static/user/right_arr.png" class="arr_right"></image>
				</view>
				<view class="collect setFlex1" @tap="$open('./collect')">
					<view class="space-bet">
						<image src="../../static/user/star.png" class="allImages"></image>
						<view class="set_font">我的收藏</view>
					</view>
					<image src="../../static/user/right_arr.png" class="arr_right"></image>
				</view>
			</view>
		</view>
		<view class="setup setFlex" @tap="invitation">
			<view class="space-bet">
				<image src="../../static/user/share.png" class="allImages1"></image>
				<view class="set_font">邀请好友</view>
			</view>
			<image src="../../static/user/right_arr.png" class="arr_right"></image>
		</view>
		<view class="setup setFlex" @tap="$open('./user-set')">
			<view class="space-bet">
				<image src="../../static/user/setup.png" class="allImages1"></image>
				<view class="set_font">设置</view>
			</view>
			<image src="../../static/user/right_arr.png" class="arr_right"></image>
		</view>
		<view class="alert-wrapper center colum" v-if="shareCode!=''" @tap="shareCode=''">
			<view class="alert-inner center colum">
				<tki-qrcode ref="qrcode" cid="cid" pdground="#0297FE"  foreground="#0297FE" :val="123" :size="400" :onval="true" :loadMake="true" />
				<view class="f34 c666">快来扫码加入吧</view>
			</view>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	data() {
		return {
			userinfo: '',
			shareCode:''
		};
	},
	components: { tkiQrcode },
	onShow() {
		this.userinfo = uni.getStorageSync('userinfo');
		this.userinfo.telephone = uni.getStorageSync('telephone');
	},
	methods: {
		invitation() {
			this.shareCode='http://int.laonh.com/h5/#/pages/start/register?inviteUserId=' + uni.getStorageSync('userinfo').userId
		}
	}
};
</script>

<style lang="scss">
.alert-wrapper{
		background: rgba(0,0,0,.6);
		.alert-inner{
			background: #FFFFFF;
			padding: 20rpx;
			border-radius: 8rpx;
		}
		.f34{
			margin-top: 30rpx;
		}
	}
.share_img {
	width: 100%;
	margin-top: 30rpx;
}
.wrapper {
	background: #f3f3f3;
}

.head {
	height: 340rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	border-bottom: 1rpx solid #e0e0e0;
	justify-content: space-between;
	padding-top: 90rpx;
}
.aside_left {
	display: flex;
	flex-direction: row;
}
.user_head {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin: 60rpx 30rpx 70rpx 30rpx;
	overflow: hidden;
}

.user_box {
	display: flex;
	flex-direction: column;
	margin-top: 79rpx;
}

.user_name {
	font: 32rpx/32rpx '';
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 30rpx;
}

.user_number {
	font: 26rpx/26rpx '';
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}

.aside_right {
	margin: 135rpx 30rpx 0 0;
}

.erweima {
	width: 30rpx;
	height: 30rpx;
	margin-right: 30rpx;
}

.right_arr {
	width: 12rpx;
	height: 24rpx;
}

.setFlex {
	height: 103rpx;
	background: rgba(255, 255, 255, 1);
	margin-top: 20rpx;
	border-bottom: 1rpx solid #e0e0e0;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.setFlex1 {
	height: 104rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.bord720 {
	width: 720rpx;
}
.allImages {
	width: 40rpx;
	height: 40rpx;
	margin-right: 28rpx;
}
.allImages1 {
	width: 40rpx;
	height: 40rpx;
	margin-left: 30rpx;
	margin-right: 28rpx;
}

.set_font {
	font: 30rpx/30rpx '';
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.my_box {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 19rpx;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1rpx solid #e0e0e0;
	background: rgba(255, 255, 255, 1);
}

.arr_right {
	width: 12rpx;
	height: 24rpx;
	margin-right: 30rpx;
}
.setup {
	margin-top: 20rpx;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1rpx solid #e0e0e0;
	background: rgba(255, 255, 255, 1);
}
.windcar {
	border-bottom: 1rpx solid #e0e0e0;
}
.space-bet {
	display: flex;
	flex-direction: row;
	align-items: center;
}
</style>
